<script setup>
/**
 * & 文件引入区域
 */

import { useRouter } from "vue-router";
import { ref } from 'vue'
import { useI18n } from "vue-i18n";
const { t } = useI18n();
/**
 * & 注册区
 */

/**
 * & 变量声明区
 */
let tabBarTitle = ["Ticket", "Train tickets"];
const router = useRouter();
const isclick = ref(false)
/**
 * & 函数区
 */
const toTicketDetailFun = () => {
  router.push({
    path: "/ticketDetail",
  });
};
const back = () => {
  isclick.value = true
  setTimeout(() => {
    router.back()
  }, 200)
}
</script>

<template>
  <div class="flightPage">
    <img src="/images/Shop/backBtn1.png" alt="" class="backBtn" @click="$router.back()" />

    <div class="swiper">
      <van-swipe class="my-swiper" :show-indicators="false">
        <van-swipe-item v-for="(item, i) in 5" :key="i">
          <img src="/images/Shop/flightSwiper.png" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="schedule">
      <TabBar :title="tabBarTitle" @routerFun="toTicketDetailFun">
        <div class="content">
          <div class="typeChoose">
            <div class="item con">one-way</div>
            <div class="item">round trip</div>
          </div>

          <div class="addressChoose">
            <div class="from">北京</div>
            <img src="/images/Shop/flight.png" alt="" class="logo" />
            <div class="to">上海</div>
          </div>

          <div class="dateChoose">
            <div class="text">07月14日</div>
            <div class="tips">明天</div>
          </div>
        </div>
      </TabBar>
    </div>

    <div class="cheapTours">
      <div class="list">
        <div class="title">Cheap tours</div>

        <div class="item" v-for="(item, i) in 3" :key="i">
          <img src="/images/Shop/CheapTours.png" alt="" class="logo" />

          <div class="right">
            <div class="title">Beijing</div>

            <div class="tips">
              Beijing, known as Yanjing and Beiping in ancient times, is the
              capital of the People's Republic of China.
            </div>

            <div class="price">
              <img src="/images/Shop/plane.png" alt="" class="logo" />
              <div class="text">Pi <span>68</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="specialFares">
      <div class="content">
        <div class="title">Special fares</div>
        <div class="ul">
          <div class="li"></div>
          <div class="li"></div>
          <div class="li"></div>
          <div class="li"></div>
        </div>
      </div>
    </div>
    <div class="msk">
      <div class="box">
        <div class="title">Stay tuned</div>
        <div class="comfirm" :class="{ 'addBgc': isclick }" @click="back()">Confirm</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.flightPage {
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: scroll;

  background: #f5f5f5;

  &::-webkit-scrollbar {
    display: none;
  }

  >.backBtn {
    width: 24rem;
    height: 24rem;

    position: fixed;
    left: 16rem;
    top: 16rem;
    z-index: 100;
  }

  >.swiper {
    position: fixed;
    left: 0;
    right: 0;

    >.my-swiper {
      img {
        width: 100%;
      }
    }
  }

  >.schedule {
    position: relative;
    z-index: 100;

    padding: 18rem 16rem 0;
    margin: 210rem 0 0;
    border-radius: 12rem 12rem 0rem 0rem;
    background: #f5f5f5;

    >.tabBar {
      padding-bottom: 28rem;

      >.content {
        padding: 0 16rem;

        >.typeChoose {
          display: flex;
          justify-content: center;
          margin: 8rem 0 14rem;

          >.item {
            font-size: 12rem;
            font-weight: 500;
            line-height: 16rem;
            color: #000;
            padding: 5rem;

            background: #d1cfcf;
            border-radius: 8rem;
            box-shadow: 1rem 5rem 3rem -2rem rgba(0, 0, 0, 0.2);

            &.con {
              background: #fff;
            }
          }
        }

        >.addressChoose {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 16rem 6rem;
          border-bottom: 1rem solid #e0e0e0;

          font-size: 24rem;
          font-weight: 400;
          line-height: 34rem;
          color: #000;

          >.logo {
            width: 35rem;
          }
        }

        >.dateChoose {
          position: relative;
          padding: 12rem 0;
          border-bottom: 1rem solid #e0e0e0;
          margin-top: 14rem;

          font-size: 20rem;
          line-height: 20rem;
          font-weight: 400;

          >.tips {
            position: absolute;

            font-size: 12rem;
            line-height: 12rem;
            color: #999;

            left: 100rem;
            bottom: 7rem;
          }
        }
      }
    }
  }

  >.cheapTours {
    position: relative;
    z-index: 100;
    background: #f5f5f5;
    padding-top: 16rem;

    >.list {
      padding: 10rem 0 1rem;
      margin: 0 16rem;
      background: #fff;
      border-radius: 12rem 8rem 12rem 12rem;

      >.title {
        font-size: 14rem;
        font-weight: 500;
        line-height: 20rem;
        color: #000;

        margin-bottom: 10rem;
        padding-left: 15rem;
      }

      >.item {
        padding: 0 16rem 14rem 18rem;
        margin-bottom: 14rem;
        position: relative;

        display: flex;

        &::before {
          content: "";
          position: absolute;

          height: 1rem;
          width: 85%;
          background: #9c9494;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
        }

        >img.logo {
          width: 97rem;
          margin-right: 15rem;
        }

        >.right {
          position: relative;
          font-weight: 500;

          >.title {
            font-size: 14rem;
            line-height: 20rem;
            color: #000;
            margin-bottom: 5rem;
          }

          >.tips {
            font-size: 9rem;
            line-height: 12rem;
            color: #524e4e;
          }

          >.price {
            position: absolute;
            display: flex;
            align-items: center;
            bottom: -4rem;
            left: -6rem;

            >img {
              width: 22rem;
              margin-right: 4rem;
            }

            >.text {
              font-size: 14rem;
              font-weight: 500;
              line-height: 28rem;
              color: #999;

              display: flex;
              align-items: center;

              >span {
                font-size: 20rem;
                color: #642e8e;
                margin-left: 5rem;
              }
            }
          }
        }
      }
    }
  }

  >.specialFares {
    background: #f5f5f5;
    position: relative;
    z-index: 100;
    padding: 10rem 16rem 0;

    >.content {
      padding: 15rem 14rem;
      border-radius: 12rem 8rem 12rem 12rem;
      background: #fff;

      >.title {
        font-size: 14rem;
        font-weight: 500;
        line-height: 20rem;

        margin-bottom: 18rem;
      }

      >.ul {
        display: flex;
        flex-wrap: wrap;
        padding-left: 10rem;
        padding-right: 8rem;

        >.li {
          margin-right: 26rem;
          margin-bottom: 20rem;

          width: 143rem;
          height: 143rem;

          background: #cccccc;

          border-radius: 18rem;

          &:nth-of-type(2n) {
            margin-right: 0;
          }
        }
      }
    }
  }
}

.msk {
  background-color: rgba(73, 73, 73, 0.404);
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  .box {
    position: absolute;
    background-color: rgb(255, 255, 255);
    border-radius: 16rem;
    top: calc((100vh - 120rem)/2);
    left: calc((100vw - 250rem)/2);
    width: 250rem;
    height: 140rem;

    .title {
      height: 90rem;
      width: 250rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22rem;
      border-bottom: 1rem solid #ddd;
      color: rgb(100, 46, 142);
      text-align: center;
    }

    .comfirm {
      width: 100%;
      font-size: 18rem;
      color: rgb(153, 153, 153);
      height: 50rem;
      line-height: 50rem;
      text-align: center;
      border-radius: 0 0 16rem 16rem;
    }
  }
}

.addBgc {
  background-color: #ddd;
}
</style>
